<template>
	<view class="content-header">
		<view class="top136"></view>
		<view class="flex-row flex-content-between header-top flex-item-center">
			<view class="header-txt">提现方式</view>
			<view class="flex-row flex-item-center">
				<picker @change="bindPickerChange"  :range="withdrawal_type" range-key="title">
										<view class="uni-input" v-if="selectType==null">选择提现方式</view>
										<view class="xuanz flex-row flex-item-center" v-if="selectType!=null">
											<image :src="$utils.cdnImg(selectType.icon)" mode=""></image>
											<view>{{selectType.title}}</view>
										</view>
									</picker>
									<image class="header-img1" src="../../static/order/you.png" mode="scaleToFill"></image>
			</view>
		</view>
		<view v-if="bankCard==null" class="top72"></view>
		<view v-if="bankCard!=null" class="top44"></view>
		<view class="body">
			<view class="body-top">
				<view class="flex-row flex-content-between body-header">
					<view>提现金额</view>
					<view @tap="towithInfo">提现明细</view>
				</view>
				<view class="body-price">
					<input type="number" v-model="price" placeholder="请输入提现金额" placeholder-class="body-price-p"/>
				</view>
				<view class="body-explain flex-row">
					<view>当前余额数量：{{userInfo?userInfo.money:0}}，<text class="allwith" @tap="allTixian">全部提现</text></view>
				</view>
				<view class="flex-column xuanzcard-top" v-if="selectType!=null&&selectType.card==1">
					<view class="xuanzcard">选择银行卡</view>
					<view class="flex-column flex-content-center flex-item-center" v-if="bankCardList.length==0">
						<view class="banks flex-row flex-item-center" @tap="clickthgis">
							<image src="../../static/index/jiajia.png" mode="scaleToFill"></image>
							<view>添加到账储蓄卡</view>
						</view>
						
					</view>
					<view v-if="bankCard!=null" class="flex-row flex-content-between" @tap="clickthgis">
						<view class="flex-row addcard">
							<image :src="bankCard.bank.back_image?$utils.cdnImg(bankCard.bank.back_image):`../../static/index/default_card.png`" mode="widthFix"></image>
							<view>{{bankCard.bank.name}}（{{bankCard.card_num.substr(-4)}}）</view>
						</view>
						<image class="xiangyou" src="../../static/order/you.png" mode="scaleToFill"></image>
						
					</view>
				</view>
				<view v-if="selectType!=null&&selectType.card==0" class="flex-column">
					<view class="zhanghao">
						<view class="zhanghao-top">账号</view>
						<view class="zhanghao-input"><input v-model="account_number" placeholder="请输入账号"/></view>
					</view>
				</view>
				<view class="body-sm">提现说明</view>
				<view class="body-sm-info">
					<view v-for="item in thisInit.withdrawal_describe">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<mu-suspension bottom="73" left="175">
			<view class="flex-row flex-content-center">
				<view class="btn" @tap="submit">提交申请</view>
			</view>
		</mu-suspension>
		<uni-popup ref="changeBank" type="bottom">
			<view class="body-popup">
				<view class="body-popup-top">
					<view class="flex-row flex-content-between flex-item-center">
						<view class="body-popup-header">选择到账银行卡</view>
						<image @tap="closeBankList" class="body-popup-header-img" src="../../static/order/x.png" mode="scaleToFill"></image>
					</view>
					<view class="henxian"></view>
					<scroll-view :scroll-y="true" class="body-popup-scroll">
						<view class="ones flex-column" v-for="bank in bankCardList">
							<view class="flex-row flex-content-between flex-item-center" @tap="changeBank(bank)">
								<view class="flex-row">
									<image class="bank-img" :src="bank.bank.back_image?$utils.cdnImg(bank.bank.back_image):`../../static/index/default_card.png`" mode="scaleToFill"></image>
									<view class="flex-column bank-txt">
										<view>{{bank.bank.name}} {{bank.type==1?"储蓄卡":"信用卡"}} </view>
										<view>（{{bank.card_num.substr(-4)}}）</view>
									</view>
								</view>
								<image class="dagou" v-if="bank.selected" src="../../static/bank/gou.png" mode="scaleToFill"></image>
							</view>
						</view>
						<view class="ones">
							<view class="flex-row flex-content-between" @tap="toAddCard">
								<view class="flex-row flex-item-center">
									<image class="bank-img-1" src="../../static/order/ka.png" mode="scaleToFill"></image>
									<view class="bank-txt1">使用新卡提现</view>
								</view>
								<image class="img-1" src="../../static/index/you.png" mode="scaleToFill"></image>
							</view>
							
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				bankCard:null,//银行卡信息
				bankCardList:[
				],//可选银行卡列表
				price:'',//提现金额
				thisInit:null,//初始化数据
				withdrawal_type:[],//提现类型
				selectType:null,//选择的提现类型
				account_number:"",//账号
			}
		},
		computed:{
			userInfo(){
				return this.$store.state.user.userInfo
			}
		},
		onLoad() {
			var that = this;
			this.$store.dispatch("getUserInfo")
			this.thisInit = uni.getStorageSync('init');
			// console.log(this.thisInit);
			//获取提现类型
			this.getWithdrawalType();
			// setTimeout(function(){
			// 	that.$refs.changeBank.open();
			// },200)
		},
		onShow() {
			this.getBankList();
		},
		methods:{
			//提交提现申请
			submit(){
				let with_type = this.selectType;
				if(!with_type){
					this.$utils.showMessage("请选择方式")
					return
				}
				let data = {
					type_id:with_type.id
				}
				if(with_type.card==1){
					if(!this.bankCard){
						this.$utils.showMessage("请选择银行卡")
						return
					}
					data.card_id = this.bankCard.id;
				}else{
					if(!this.account_number){
						this.$utils.showMessage("请填写账号")
						return
					}
					data.account_number = this.account_number
				}
				if(!this.price){
					this.$utils.showMessage("请填写提现金额")
					return
				}
				if(parseFloat(this.price)<=0){
					this.$utils.showMessage("请填写正数金额")
					return
				}
				data.amount = this.price;
				data.name = '';
				data.mobile = '';
				let that = this;
				this.$api.withdrawal(data).then(res=>{
					that.$utils.showMessage("申请成功");
					that.$store.dispatch("getUserInfo");
				})
			},
			//获取银行列表
			getBankList(){
				let that = this;
				this.$api.getUserCard().then(res=>{
					// console.log(res);
					res.forEach((item,iu)=>{
						if(iu==0){
							item.selected = true
						}else{
							item.selected = false;
						}
					})
					that.bankCardList = res;
					if(res.length>0){
						that.bankCard = res[0];
					}
					
				})
			},
			//获取提现类型
			getWithdrawalType(){
				let that = this;
				this.$api.getWithdrawalType().then(res=>{
					console.log(res);
					that.withdrawal_type = res;
				})
			},
			//团部提现
			allTixian(){
				this.price = this.userInfo.money
			},
			//跳转到提现明细
			towithInfo(){
				uni.navigateTo({
					url:'/pages/user/withdrawal_list'
				})
			},
			//到银行卡点击事件
			clickthgis(){
				var bankCard = this.bankCard;
				if(!bankCard){
					this.toAddCard();
				}else{
					this.showChangeBank()
				}
			},
			//跳转到添加银行卡
			toAddCard(){
				this.$refs.changeBank.close();
				uni.navigateTo({
					url:'/pages/bank/add_bank'
				})
			},
			//弹出选择银行卡弹框
			showChangeBank(){
				this.$refs.changeBank.open();
			},
			//关闭弹框
			closeBankList(){
				this.$refs.changeBank.close()
			},
			//选择提现方式
			bindPickerChange(e){
				console.log(e);
				let index = e.detail.value;
				let withdrawal_type = this.withdrawal_type;
				this.selectType = withdrawal_type[index]
				console.log(this.selectType);
			},
			//修改银行卡
			changeBank(e){
				console.log(e);
				this.bankCard = e;
				let bankCardList = this.bankCardList;
				bankCardList.forEach(item=>{
					if(item.id==e.id){
						item.selected = true
					}else{
						item.selected = false
					}
				})
				this.bankCardList = bankCardList;
				this.$refs.changeBank.close();
			}
			
		}
	}
</script>

<style lang="scss">
	.zhanghao-input{
		width: 670rpx;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		border: 1rpx solid #CCCCCC;
		margin-top: 20rpx;
		>input{
			text-align: left;
			padding: 25rpx 30rpx;
		}
	}
	.zhanghao{
		margin-top: 20rpx;
	}
	.zhanghao-top{
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.xiangyou{
		width: 12.3rpx;
		height: 22.4rpx;
		margin-top: 51rpx;
	}
	.addcard{
		margin-top: 40rpx;
		>image:nth-child(1){
			width: 45rpx;
			height: 45rpx;
		}
		>view:nth-child(2){
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-left: 20rpx;
		}
	}
	.banks{
		margin-top: 50rpx;
		>image{
			width: 32rpx;
			height: 32rpx;
		}
		>view{
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #69D330;
		}
	}
	.xuanzcard-top{
		margin-top: 60rpx;
	}
	.xuanzcard{
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.xuanz{
		>image{
			width: 50rpx;
			height: 50rpx;
		}
		>view{
			font-size: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-left: 26rpx;
		}
	}
	.img-1{
		width: 18rpx;
		height: 30rpx;
	}
	.bank-txt1{
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-left: 36rpx;
	}
	.bank-img-1{
		width: 50rpx;
		height: 39rpx;
	}
	.bank-txt{
		margin-left: 36rpx;
		>view{
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}
	.bank-img{
		width: 50rpx;
		height: 50rpx;
	}
	.dagou{
		width: 36rpx;
		height: 30rpx;
	}
	.ones{
		width: 100%;
		height: 90rpx;
		margin-top: 80rpx;
	}
	.body-popup-scroll{
		width: 100%;
		height: 640rpx;
		// background-color: #ff557f;
	}
	.henxian{
		width: 690rpx;
		height: 0px;
		opacity: 1;
		border-bottom: 1rpx solid #EEEEEE;
		margin-top: 52rpx;
	}
	.body-popup-header-img{
		width: 28rpx;
		height: 28rpx;
		margin-top: 5rpx;
	}
	.body-popup-header{
		font-size: 36rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-left: 217rpx;
	}
	.body-popup-top{
		padding-top: 54rpx;
		margin-left: 32rpx;
		margin-right: 50rpx;
	}
	.body-popup{
		width: 750rpx;
		height: 836rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0px 0px;
		opacity: 1;
	}
	.btn{
		width: 400rpx;
		height: 90rpx;
		background: linear-gradient(90deg, $default-button-color 0%, $default-button-end-color 100%);
		border-radius: 45rpx 45rpx 45rpx 45rpx;
		opacity: 1;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: $default-button-foncolor;
		text-align: center;
		line-height: 90rpx;
	}
	.body-sm-info{
		margin-top: 20rpx;
		>view{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			margin-bottom: 10rpx;
		}
	}
	.body-sm{
		font-size: 36rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-top: 30rpx;
	}
	.allwith{	
		color: #3B70FF;
	}
	.body-explain{
		margin-top: 30rpx;
		>view{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}
	.body-price-p{
		font-size: 50rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
	}
	.body-price{
		width: 670rpx;
		// height: 158rpx;
		border-bottom: 1rpx solid #EBEBEB;
		line-height: 158rpx;
		>input{
			height: 75rpx;
			margin-top: 60rpx;
			margin-bottom: 28rpx;
		}
	}
	.body-header{
		>view:nth-child(1){
			font-size: 36rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
		>view:nth-child(2){
			width: 147rpx;
			height: 56rpx;
			background: #FFFFFF;
			border-radius: 29rpx 29rpx 29rpx 29rpx;
			opacity: 1;
			border: 1rpx solid $default-button-color;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: $default-button-color;
			text-align: center;
			line-height: 56rpx;
		}
	}
	.body-top{
		padding-top: 57rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
	}
	/* #ifdef H5 */
	.body{
		width: 750rpx;
		min-height: 81vh;
		background-color: #FFFFFF;
		border-radius: 40rpx 40rpx 0px 0px;
	}
	/* #endif */
	/* #ifdef MP */
	.body{
		width: 750rpx;
		height: calc(100vh - 255rpx);
		background-color: #FFFFFF;
		border-radius: 40rpx 40rpx 0px 0px;
	}
	/* #endif */
	/* #ifdef APP-PLUS */
	.body{
		width: 750rpx;
		height: calc(100vh - 255rpx);
		background-color: #FFFFFF;
		border-radius: 40rpx 40rpx 0px 0px;
	}
	/* #endif */
	.top44{
		width: 100%;
		height: 44rpx;
	}
	.top72{
		width: 100%;
		height: 72rpx;
	}
	.header-img3{
		width: 18rpx;
		height: 30rpx;
		margin-left: 110rpx;
		margin-bottom: 41rpx;
	}
	.header-txt11{
		margin-top: -31rpx;
	}
	.header-txt2{
		margin-left: 26rpx;
		>view{
			font-size: 40rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}
	.header-img2{
		width: 50rpx;
		height: 50rpx;
	}
	.header-top{
		margin-left: 40rpx;
		margin-right: 40rpx;
	}
	.header-txt1{
		ont-size: 40rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.header-img1{
		width: 18rpx;
		height: 30rpx;
		margin-left: 50rpx;
	}
	.header-txt{
		font-size: 36rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.top136{
		width: 100%;
		height: 136rpx;
	}
</style>